﻿@{
    ViewData["Title"] = "User";
}
<p>User List</p>
<div class="table-responsive">
    <table id="table" class="table table-striped  table-bordered">
        <tr><th>操作</th><th>Name</th><th>Email</th><th>PhoneNumber</th><th>FullName</th><th>Surname</th></tr>
    </table>
</div>

<p>Add User</p>
<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="hidden" class="form-control" id="Id" name="Id" >
            <input type="text" class="form-control" id="Name" name="Name" placeholder="Name">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="Password" name="Password" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">EmailAddress</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">PhoneNumber</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="PhoneNumber" name="PhoneNumber" placeholder="PhoneNumber">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">FullName</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="FullName" name="FullName" placeholder="FullName">
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Surname</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="Surname" name="Surname" placeholder="Surname">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" id="btnAddUser" class="btn btn-default">Add</button>
            <button type="button" id="btnUpdateUser" class="btn btn-default" style="display:none">Update</button>
        </div>
    </div>
</form>

@section Scripts{

<script type="text/javascript">
        $(function ($) {
            $.ajax({
                type: "GET",
                url: '@Url.Content("~/auth/GetAllUsers")',
                success: function (data) {
                    $.each(data, function (index, item) {
                        var html = '<tr><td> '+
                            '<a href="javascript:;" class="btn btn-primary btn-xs btnUpdate" onclick = "GetUser(' + item.Id + ')" > Update</a>&nbsp;' +
                            '<a class="btn btn-primary btn-xs" href="@Url.Content("~/auth/delete?id=")' + item.Id + '">Delete</a>' +
                            '</td> ' +
                            '<td>' + item.Name + '</td> ' +
                            '<td>' + item.EmailAddress + '</td> ' +
                            '<td>' + item.PhoneNumber + '</td> ' +
                            '<td>' + item.FullName + '</td> ' +
                            '<td>' + item.Surname + '</td> ' +
                            '</tr > ';
                        $("#table").append(html);

                    });
                }
            });

            $("#btnAddUser").click(function () {
                $.ajax({
                    type: "POST",
                    url: '@Url.Content("~/auth/add")',
                    data: $("form").serialize(),
                    success: function (msg) {
                        alert(msg)
                        window.location.reload();
                    }
                });
            });
            $("#btnUpdateUser").click(function () {
                $.ajax({
                    type: "POST",
                    url: '@Url.Content("~/auth/Update")',
                    data: $("form").serialize(),
                    success: function (msg) {
                        alert(msg)
                        window.location.reload();
                    }
                });
            });

    });

    function GetUser(id) {
        //var id = $(this).attr("data-id");
        $.ajax({
            type: "GET",
            url: '@Url.Content("~/auth/GetUser")',
            data: { id: id },
            success: function (data) {
                $("#btnAddUser").hide();
                $("#btnUpdateUser").show();
                $("#Id").val(data.Id);
                $("#Name").val(data.Name);
                $("#Password").val(data.Password);
                $("#EmailAddress").val(data.EmailAddress);
                $("#PhoneNumber").val(data.PhoneNumber);
                $("#FullName").val(data.FullName);
                $("#Surname").val(data.Surname);
            }
        });
    };

</script>

}